<template>
  <div class="app-container">
    <el-tabs type="border-card">
      <el-tab-pane label="排班时间">
        <div class="top">
          <i class="el-icon-alarm-clock" />
          <span class="pai">排班时间</span>
        </div>
        <div style="margin-top: 10px;">
          <span>白班：</span>
          <el-time-picker
            v-model="startTime"
            style="width: 120px"
            value-format="HH:mm"
            format="HH:mm"
            type="date"
          />&nbsp;--
          <el-time-picker
            v-model="endTime"
            style="width: 120px"
            value-format="HH:mm"
            format="HH:mm"
            type="date"
          />
        </div>
        <div style="margin-top: 10px;">
          <span>晚班：</span>
          <el-time-picker
            v-model="nightstartTime"
            style="width: 120px"
            value-format="HH:mm"
            format="HH:mm"
            type="date"
          />&nbsp;--
          <el-time-picker
            v-model="nightendTime"
            style="width: 120px"
            value-format="HH:mm"
            format="HH:mm"
            type="date"
          />
        </div>
        <div style="margin-top: 10px;">
          <span>夜班：</span>
          <el-time-picker
            v-model="shiftstartTime"
            style="width: 120px"
            value-format="HH:mm"
            format="HH:mm"
            type="date"
          />&nbsp;--
          <el-time-picker
            v-model="shiftendTime"
            style="width: 120px"
            value-format="HH:mm"
            format="HH:mm"
            type="date"
          />
        </div>
        <div style="float: right;padding-top: 10px;">
          <el-button type="primary">重置</el-button>
          <el-button type="primary" @click="btn">保存</el-button>
        </div>
      </el-tab-pane>
      <!-- <el-tab-pane label="排版设置">排版设置</el-tab-pane> -->
    </el-tabs>
  </div>
</template>

<script>
import { updateSchedualTime } from '@/api/table'

export default {
  data() {
    return {
      startTime: '08:00',
      endTime: '08:00',
      nightstartTime: '08:00',
      nightendTime: '08:00',
      shiftstartTime: '08:00',
      shiftendTime: '08:00'
    }
  },
  created() {},
  mounted() {},
  methods: {
    btn() {
      const settingContent = this.startTime + '-' + this.endTime
      const nightsettingContent = this.nightstartTime + '-' + this.nightendTime
      const shiftsettingContent = this.shiftstartTime + '-' + this.shiftendTime
      const dataList = [
        { id: '', settingName: '白班', settingContent: settingContent },
        { id: '', settingName: '晚班', settingContent: nightsettingContent },
        { id: '', settingName: '夜班', settingContent: shiftsettingContent }
      ]
      const obj = {
        list: JSON.stringify(dataList)
      }
      updateSchedualTime(obj).then((res) => {})
    }
  }
}
</script>
<style lang="scss" scoped >
.header {
  padding-bottom: 20px;
}
.table_warp {
  margin-top: 40px;
}
.el-icon-alarm-clock {
  margin-top: 10px;
}
.pai {
  margin-left: 10px;
}
.top {
  height: 50px;
  border-bottom: 1px solid #e8eaec;
}
</style>
